<template>
  <div class="settlement-all">
    <div
      :key="v.id"
      v-for="v in addressList"
      :class="{default: v.adefault}"
      @click="addressChange(v.id)"
      :style="{borderColor: v.id === isClick ? 'red' : ''}"
      class="address-item"
    >
      <i
        style="float: right; padding: 3px 0; font-size: 20px"
        @click="deleteAddress(v.id)"
        class="el-icon-delete"
      ></i>
      <i
        style="float: right; padding: 3px 0; font-size: 20px"
        @click="showUpdate(v)"
        class="el-icon-edit"
      ></i>
      <div v-if="v.adefault" style="float: right; padding: 3px 0; font-size: 12px">默认地址</div>
      <div
        @click="updateDefaultAddress(v)"
        class="set-default"
        v-else
        style="float: right; padding: 3px 0; font-size: 12px"
      >设为默认地址</div>
      <div class="name">收货人: {{v.name}}</div>
      <div class="tel">电话: {{v.tel}}</div>
      <div class="address">
        <div>收货地址: {{getAddress(v.province, v.city, v.county)}} {{v.detailed}}</div>
      </div>
    </div>
    <div class="add-address">
      <el-button type="primary" @click="showAdd" icon="el-icon-circle-plus-outline">添加地址</el-button>
    </div>
    <el-dialog @closed="resetForm('address')" title="添加地址" :visible.sync="addShow" :center="true">
      <el-form :model="address" status-icon ref="address" label-width="100px">
        <el-form-item label="收货人">
          <el-input v-model="address.name"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话">
          <el-input v-model="address.tel"></el-input>
        </el-form-item>
        <el-form-item label="省">
          <el-select filterable v-model="address.province" placeholder="请选择">
            <el-option
              v-for="(item, key) in provinces"
              :key="key"
              :label="item.province"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市">
          <el-select filterable v-model="address.city" placeholder="请选择">
            <el-option v-for="(item, key) in citys" :key="key" :label="item.city" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="县">
          <el-select filterable v-model="address.county" placeholder="请选择">
            <el-option v-for="(item, key) in countys" :key="key" :label="item" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="address.detailed"></el-input>
        </el-form-item>
        <el-form-item label="默认地址">
          <el-switch v-model="address.adefault"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('address')">添加</el-button>
          <el-button @click="resetForm('address')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      @closed="resetForm('updateAddress')"
      title="更新地址"
      :visible.sync="updateShow"
      :center="true"
    >
      <el-form :model="updateAddress" status-icon ref="updateAddress" label-width="100px">
        <el-form-item label="收货人">
          <el-input v-model="updateAddress.name"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话">
          <el-input v-model="updateAddress.tel"></el-input>
        </el-form-item>
        <el-form-item label="省">
          <el-select
            @change="updatePChange"
            filterable
            v-model="updateAddress.province"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, key) in provinces"
              :key="key"
              :label="item.province"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市">
          <el-select
            @change="updateCChange"
            filterable
            v-model="updateAddress.city"
            placeholder="请选择"
          >
            <el-option v-for="(item, key) in citys" :key="key" :label="item.city" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="县">
          <el-select filterable v-model="updateAddress.county" placeholder="请选择">
            <el-option v-for="(item, key) in countys" :key="key" :label="item" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="updateAddress.detailed"></el-input>
        </el-form-item>
        <el-form-item label="默认地址">
          <el-switch v-model="updateAddress.adefault"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update('updateAddress')">添加</el-button>
          <el-button @click="resetForm('updateAddress')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import City from "../../public/city";

export default {
  name: "addressItem",
  data() {
    return {
      isClick: 0,
      addShow: false,
      updateShow: false,
      provinces: null,
      countys: null,
      citys: null,
      addressList: null,
      address: {
        province: null,
        city: null,
        county: null,
        detailed: null,
        name: null,
        tel: null,
        adefault: false
      },
      updateAddress: {
        province: null,
        city: null,
        county: null,
        detailed: null,
        name: null,
        tel: null,
        adefault: false
      }
    };
  },
  created() {
    let city = new City();
    this.provinces = city.getProvince();
    this.getAddressList();
  },
  watch: {
    "address.province": function(newValue, oldValue) {
      this.provinceChange(newValue);
      let keys = Object.keys(this.citys);
      if (keys.length === 1) {
        this.address.city = keys[0];
      } else {
        this.address.city = null;
      }
      this.address.county = null;
    },
    "address.city": function(newValue, oldValue) {
      this.cityChange(newValue);
      this.address.county = null;
    },
    "updateAddress.province": function(newValue, oldValue) {
      this.provinceChange(newValue);
    },
    "updateAddress.city": function(newValue, oldValue) {
      this.cityChange(newValue);
    }
  },
  methods: {
    addressChange(id) {
      this.isClick = id;
      this.$emit("addressChange", this.isClick);
    },
    getAddress(pid, cid, cuid) {
      let city = new City();
      return city.getAddress(pid, cid, cuid);
    },
    getAddressList() {
      this.axios.get("/address/front/queryAll").then(res => {
        this.addressList = res.data.data;
        this.addressList.forEach(v => {
          if (v.adefault) {
            this.isClick = v.id;
            this.$emit("addressChange", this.isClick);
            return;
          }
        });
      });
    },
    provinceChange: function(provinceId) {
      this.citys = this.provinces[provinceId]["citys"];
    },
    cityChange: function(cityId) {
      if (cityId != null) {
        this.countys = this.citys[cityId]["countys"];
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios.post("/address/front/add", this.address).then(res => {
            if (res.data.status === 200) {
              this.$message({
                message: res.data.msg,
                type: "success",
                center: true
              });
              this.addShow = false;
              this.getAddressList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    showAdd() {
      this.addShow = true;
    },
    deleteAddress(id) {
      this.$myDelete(
        this,
        "/address/front/delete?id=" + id,
        this.getAddressList
      );
    },
    showUpdate(v) {
      this.updateAddress = this.$copy(v);
      this.updateShow = true;
    },
    update(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$myPut(
            this,
            "/address/front/update",
            () => {
              this.updateShow = false;
              this.getAddressList();
            },
            this.updateAddress
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updatePChange() {
      setTimeout(() => {
        let keys = Object.keys(this.citys);
        if (keys.length === 1) {
          this.updateAddress.city = keys[0];
        } else {
          this.updateAddress.city = null;
        }
        this.updateAddress.county = null;
      }, 100);
    },
    updateCChange() {
      this.updateAddress.county = null;
    },
    updateDefaultAddress(v) {
      v.adefault = true;
      this.$myPut(this, "/address/front/update", this.getAddressList, v);
    }
  }
};
</script>

<style scoped lang="scss">
.address-item {
  padding: 10px;
  width: 300px;
  border: 1.8px dashed #409eff;
  border-radius: 8px;
  margin: 0 15px 20px;
  color: #555;
  cursor: pointer;
  font-size: 16px;
  > * {
    margin: 0 5px;
  }
  line-height: 1.5;
}

.default {
  border-color: orange;
}

.set-default:hover {
  color: #409eff;
}

.address-item:hover {
  border-color: blue;
}

.address > * {
  float: left;
}

.add-address {
  width: 300px;
  min-height: 100px;
  border: 1.8px dashed #409eff;
  border-radius: 8px;
  margin: 0 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409eff;
}

.settlement-all {
  display: flex;
  flex-wrap: wrap;
}

.el-icon-edit:hover {
  color: #409eff;
}

.el-icon-delete:hover {
  color: red;
}
</style>